<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../style/play_widget.css">
    <title>播放控件</title>
</head>
<body>
    <div id="main" class="d-flex flex-column border-dark">
        <div id="content" class="shadow h-50">
            <!-- 歌名 -->
            <div class="song-name rounded">
                <div id="song-name" class="text-nowrap"></div>
                <!-- 阴影效果 -->
                <div class="cover w-100 h-100"></div>
            </div>
            <!-- 关闭按钮 -->
            <div class="close text-white user-select-none" onclick="close_widget()">&times;</div>
        </div>
        <div id="icons" class="d-flex justify-content-around h-50">
            <!-- 播放按钮 -->
            <img class="icon h-100 play" src="../imgs/icons/play.svg" draggable="false" onclick="send_message('toggle_play')"/>
            <!-- 上一首 -->
            <img class="icon h-100 icon-back" src="../imgs/icons/next.svg" draggable="false" onclick="send_message('previous')"/>
            <!-- 下一首 -->
            <img class="icon h-100" src="../imgs/icons/next.svg" draggable="false" onclick="send_message('next')"/>
            <!-- 音量调节 -->
            <div class="volume-box position-relative" class="h-100">
                <div class="volume h-100">
                    <img id="volume-icon" class="icon h-100" onclick="toggle_mute()" src="../imgs/icons/sound_on.svg" draggable="false"/>
                    <input id="volume" class="rounded" type="range" onmousemove="toggle_sound_icon()" onmouseup="send_volumn()">    
                </div>
            </div>
        </div>
    </div>

    <script src="../script/play_widget.js"></script>
</body>
</html>